<template>
    <div class="p-2" style="text-align: center;">
        <div class="import-password">
            <el-input
            v-model="input1"
            style="max-width: 600px"
            placeholder="请输入解密密码"
            >
            <template #prepend>解密密码</template>
            </el-input>
        </div>
        <div class="import-btn">
            <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action=" "
                :before-upload="handleBeforeUpload"
                :http-request="handleUpload"
                ref="fileUploadRef"
            >
                <el-button type="primary">选取文件</el-button>
            </el-upload>
        </div>
        <div v-show="failList.length > 0" style="margin-top:15px;">
            <span style="margin-left: -20%;">错误数据:</span>
            <div v-for="(item, index) in failList" style="margin: 5px 0;">
                <span>{{ item }}</span>
            </div>
        </div>
        
    </div>
</template>

<script setup name="HouseInfo" lang="ts">
import request from '@/utils/request';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const fileList = ref<any[]>([])
const failList = ref([])
const input1 = ref('')
const fileUploadRef = ref<ElUploadInstance>();

// 上传前校检格式和大小
const handleBeforeUpload = (file: any) => {
    // proxy?.$modal.loading("正在上传文件，请稍候...");
    return true;
}

const handleUpload = (file: any) => {
    let data = new FormData();
    data.append('password', input1.value);
    data.append('file', file.file);
    request({
        url: '/business/home/excelProjectAll',
        headers: {
            "Content-Type": "multipart/form-data",
            isToken: true
        },
        method: 'post',
        data:data,
        onUploadProgress: function (e) {
            proxy?.$modal.loading("正在上传文件，请稍候...");
      }
    }).then(res=> {
        if (res.length > 0) {
            proxy?.$modal.closeLoading();
            fileUploadRef.value?.handleRemove(file);
            failList.value = res
        }else{
            proxy?.$modal.closeLoading();
            failList.value = []
        }
    })
    return true;
}

onMounted( async () => {
});
</script>

<style>
.import-password {
    display: inline-block;
}
.import-btn{
    margin: 10px 0;
}
</style>
